<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!-- 这里vue没办法用驼峰，所以要写成下面这种形式 -->
            <cpn :c-info="info"></cpn>
        </div>
        <template id="cpn">
            <div>
                <h2>{{cInfo}}</h2>
            </div>
        </template>
        <script src="../js/vue.js"></script>
        <script>
            const cpn = {
                template: '#cpn',
                props: {
                    cInfo: {
                        type: Object,
                        default() {
                            return {

                            }
                        }
                    }
                }
            }
            const app = new Vue({
                el: '#app',
                components: {
                    cpn
                },
                data: {
                    message: ' 你好啊',
                    movies: ['海王', '海贼王', '海尔兄弟'],
                    info: {
                        name: 'why',
                        age: 12
                    }
                }
            })
        </script>
    </body>
</html>